<template>
  <div class="dashContent">
    <div class="title">
      <div class="text">
        <div class="font">各班组人数统计</div>
      </div>
    </div>
    <div class="body">
      <table class="table" border="0" cellpadding="0" cellspacing="0">
        <thead>
          <tr>
            <th>序号</th>
            <th>班组名称</th>
            <th>人数</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.num }}</td>
            <td>{{ item.status }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { machineList } from '@/api/machine'

export default {
  name: 'TypeNum',
  data() {
    return {
      tableData: [],
      total: 0,
      listLoading: true,
      listQuery: {
        keyword: null,
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  computed: {

  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取数据
    async getList() {
      const res = await machineList(this.listQuery)
      if (res.code === 200) {
        this.tableData = res.data.list
        this.total = res.data.total || 0
        this.pages = res.data.pages || 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashContent {
  .title{
    display: flex;
    .text{
      flex: 1;
      text-align: left;
      .font{
        margin: 10px 0 27px 10px;
        color:#ffffff;
        cursor: pointer;
        font-size: 12px;
        font-weight: 400;
        padding: 5px 0;
        .number{
          font-size:14px;
          font-weight:500;
          color:rgba(255,255,255,0.85);
        }
      }
      .money{
         font-size: 12px;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
  .body {
    color:rgba(255,255,255,0.8);
    display: flex;
    padding-bottom: 20px;
    .table {
      margin: 0 5px 0 5px;
      flex: 1;
      table-layout: fixed;
      tr {
        height: 30px;
        color:rgba(255,255,255,0.6);
        th,
        td {
          padding: 0 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      thead {
        background: rgba(247, 181, 0, 0.2);
        th {
          font-size: 13px;
          font-weight: normal;
          text-align: left;
        }
      }
      tbody {
        tr {
          &:nth-child(even) {
            background:rgba(255,255,255,0.1);
          }
        }
      }
    }
  }
}
</style>
